<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>

<div id="app">
    <el-container>
        <el-header>
            <!--搜索框-->
            <div id="searchFrom">
                <form id="Search" >
                    <el-input placeholder="请输入内容" v-model="Search.name" class="input-with-select">
                        <el-select v-model="Search.select" slot="prepend" placeholder="请选择" style="width: 100px">
                            <el-option label="科室" value="1"></el-option>
                            <el-option label="疾病" value="2"></el-option>
                            <el-option label="医生" value="3"></el-option>
                        </el-select>
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </form>
            </div>
        </el-header>
        <el-main>

            <!--走马灯-->
            <div id="trotting-horse-lamp">
                <el-carousel :interval="5000" arrow="always">
                    <el-carousel-item v-for="item in 4" :key="item">
                        <!--添加图片-->
                    </el-carousel-item>
                </el-carousel>
            </div>

             <!--标签页-->
            <el-tabs type="border-card">
                <el-tab-pane>
                    <span slot="label"></i>医师推荐</span>
                    <el-table
                            :data="doctorTable.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                            style="width: 100%">
                        <el-table-column
                                label=""
                                align="center"
                                >
                            <template slot-scope="scope" style="margin: 0 auto;line-height: 20px">

                                <div class="block">
                                    <el-avatar :size="50" :src="scope.row.circleUrl">
                                    </el-avatar>
                                </div>
                                <span >{{scope.row.doctorName}}</span></br>
                                <span >{{scope.row.doctorDuty}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label=""
                                align="center"
                                >
                            <template slot-scope="scope">
                                <div >
                                    擅长： {{scope.row.speciality}}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label=""
                                align="center"
                        >
                            <template slot-scope="scope">
                                <el-rate
                                        v-model="scope.row.value"
                                        disabled
                                        show-score
                                        text-color="#ff9900"
                                        score-template="{value}">
                                </el-rate>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label=""
                                align="center"
                        >
                            <template slot-scope="scope">
                                <el-tag
                                        :key="tag"
                                        v-for="tag in scope.row.dutyTime"
                                        :disable-transitions="false"
                                        @close="handleClose(tag)">
                                    {{tag}}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label=""
                                align="center"
                        >
                            <template slot-scope="scope">
                                <div >
                                    <i class="el-icon-coin"></i> ￥{{scope.row.doctorRegisterCharge}}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center">
                            <template slot="header" slot-scope="scope">
                                <el-input
                                        v-model="search"
                                        size="mini"
                                        placeholder="输入关键字搜索"/>
                            </template>
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="inquiry(scope.$index,scope.row)">问诊</el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="registration(scope.$index,scope.row)">挂号</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-main>
    </el-container>

    <el-dialog
            title="预约挂号"
            :visible.sync="centerDialogVisible"
            width="30%"
            center>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="姓名" prop="ruleForm.patientName">
                <el-input
                        placeholder="请输入姓名"
                        v-model="ruleForm.patientName"
                        clearable>
                </el-input>
            </el-form-item>

            <el-form-item label="身份证ID" prop="ruleForm.patientIdCard">
                <el-input
                        placeholder="请输入身份证ID"
                        v-model="ruleForm.patientIdCard"
                        clearable>
                </el-input>
            </el-form-item>
            <el-form-item label="可预约时间" prop="ruleForm.time">
                <el-select v-model="ruleForm.value"  clearable placeholder="请选择时间" >
                    <el-option  v-for="(value, key) in ruleForm.time"
                                 :key="key"
                                 :label="value"
                                 :value="key"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="价格" prop="ruleForm.doctorRegisterCharge">
                <i class="el-icon-coin"></i> ￥{{ruleForm.doctorRegisterCharge}}
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">立即预约</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</div>

<style>
    .el-tag + .el-tag {
        margin-left: 10px;
    }
</style>
<style>
    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }
    #searchFrom{

        width: 600px;
        margin:0 auto;
        margin-top: 20px;
    }
    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
</style>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            Search: {
                name:'',
                select: ''
            },
            currentDate: new Date(),
            centerDialogVisible:false,
            doctorTable: [{
                doctorId:'',
                doctorName: '',
                doctorDuty:'',
                speciality: '',
                value:9.8,
                dutyTime: [],
                circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
                doctorRegisterCharge:0
            }],
            search: '',
            ruleForm:{
                doctorId:'',
                time:[],
                value:'',
                patientIdCard:'',
                patientName:'',
                administrativeId:'',
                doctorRegisterCharge:''
            }

        },
        methods:{
            //挂号
            registration:function (index,row) {
                this.centerDialogVisible=true;
                 this.ruleForm.time=row.dutyTime;
                 this.ruleForm.doctorId=row.doctorId;
                 this.ruleForm.doctorRegisterCharge=row.doctorRegisterCharge;

            },
            //问诊
            inquiry:function (index,row) {

            },
            //取地址栏参数
            getUrlKey:function(name) {
                return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
            },
            //单击挂号
            submitForm:function (){
                axios.post("/medical/register/insertRegister",this.ruleForm).then(resp=>{
                    alert(resp.data.data);
                })
                this.centerDialogVisible=false;
            }
        },
        //计算属性
        computed:{

        },
        //钩子函数
        mounted:function () {
               var administrativeId=this.getUrlKey("administrativeId");
               this.ruleForm.administrativeId=administrativeId;
            axios.get("/medical/doctor/selectAdministrationOrDoctorList",{
                params:{
                    "administrativeId":administrativeId
                }
            }).then(resp=>{
                this.doctorTable=resp.data.data;
            })
        }
    });
</script>
</body>
</html>
